<template>
	<view>

		<view v-for="(item,index) in list" :key="index">
			<book-list :item="item">
				<view class="border flex align-center justify-center rounded-circle px-2 py-1 ml-auto text-muted"
					@click="goDetail">
					立即学习
					<text class="iconfont icon-xiayibu ml-1"></text>
				</view>
			</book-list>
		</view>

		<uni-load-more :status="loadStatus"></uni-load-more>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: "loading",
				page: 1,
				limit: 5,
				list: []
			}
		},
		created() {
			this.getData()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.handleLoadMore()
		},
		methods: {
			refresh() {
				this.page = 1
				this.getData().finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			handleLoadMore() {
				if (this.loadStatus != 'more') {
					return
				}
				this.page = this.page + 1
				this.getData()
			},
			getData() {
				let page = this.page
				return this.$api.getMyBookList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					console.log(res);
					this.list = page == 1 ? res.rows : [...this.list, ...res.rows]
					if (res.rows.length < this.limit) {
						this.loadStatus = 'noMore'
					} else if (res.rows.length === this.limit) {
						this.loadStatus = 'more'
					}
				}).catch(err => {
					this.loadStatus = 'more'
					if (page > 1) {
						this.page = this.page - 1
					}
				})
			},
			goDetail() {
				this.$toast('暂无详情，请勿点击')
			}
		}
	}
</script>

<style>

</style>
